// 页面顶部
// .container{border: 1px solid black;}
.top p span{
    margin-left: 5px;
}

.top{
    position: relative;
    font-size: 13px;
    line-height: 37px;
    a{
        color: #444444;
    }
    .tp1{
        li{
            list-style: none;
            float: left;
            margin-right: 10px;
        }
        display: inline-block;
        width: 319px;
        height: 38px;
        span{
            color: #68af5c;
        }
    }
    .tp2{
        li{
            list-style: none;
            float: left;
            margin-left: 10px;
            position: relative;
            margin-left: 15px;
        }
        display: inline-block;
        width: 550px;
        height: 38px;
        position: absolute;
        right: 0;
        span{
            color: #717171;
        }
        b{
            width: 0;
            height: 0;
            border-color: black transparent transparent transparent;
            border-style: solid;
            border-width: 4px;
            position: absolute;
            top: 16px;
        }
    }
}
.top .tp1 li:nth-child(3){
    position: relative;
}
.top .tp1 li:nth-child(3) .lid1{
    background: white;
    display: none;
    width: 412px;
    height:290px ;
    border: 1px #e1e1e1 solid;
    position: absolute;
    p{
        span{
            width: 50px;
            display: inline-block;
            border: 1px solid #e1e1e1;
            border-bottom: none;
        }
        .line{
            display: inline-block;
            width: 260px;
            height: 30px;
            border-left: none;
            border-right: none;
            border-top: none;
            border-bottom: 1px solid #e1e1e1;
        }
    }
    .lid11{
        .location{
            margin-bottom: 10px;
            display:flex;
            div{
                width: 52px;
                height: 20px;
                text-align: center;
                line-height: 20px;
            }
        }
    }
    .lid12{
        display: none;
        .location{
            margin-bottom: 5px;
            display:flex;
            flex-wrap: wrap;
            div{
                margin-left: 15px;
                margin-left: 13px;
            }
        }
    }
}
.top .tp2 li:nth-child(4){
    position: relative;;
}

.top .tp2 li:nth-child(4) .myEchong{
    width: 100px;
    height: 130px;
    position: absolute;
    top: 30px;
    left: -10px;
    display: none;
    background: white;
    border: 1px #e1e1e1 solid;
}
.top .tp2 li:nth-child(4) .myEchong li{
    width: 100px;
    height: 20px;
    list-style: square;
    float: none;
    margin-left: -8px;
}
.top .tp2 li:nth-child(5) .soucang{
    width: 100px;
    height: 30px;
    position: absolute;
    top: 30px;
    left: -10px;
    display: none;
    background: white;
    border: 1px #e1e1e1 solid;
}
.top .tp2 li:nth-child(5) .soucang li{
    width: 100px;
    height: 20px;
    list-style: square;
    float: none;
    margin-left: -8px;
}
.top .tp2 li:nth-child(6){
    position: relative;
}
.top .tp2 li:nth-child(6) img{
    position: absolute;
    top: 30px;
    left: -10px;
    display: none;
}

.lid1 p span:nth-child(1){
    text-align: center;
    line-height: 20px;
    height: 20px;
}
.lid1 p span:nth-child(2){
    text-align: center;
    line-height: 20px;
    height: 20px;
}
.lid11 .location div:nth-child(1){
    margin-left: 15px;
    border-right: 1px solid #e1e1e1;
    color: #999999;
}

//头部搜索
.search{
    // width: 1200px;
    // margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .sd1{
        width: 200px;
        height: 104px;
        background: url(../img/epet-logo.png) no-repeat;
    }
    .sd2{
        width: 600px;
        height: 51px;
        .sd21{
            display: flex;
            align-items: center;
            width: 600px;
            height: 42px;
            background: #459d36;
            input{
                margin-left: 5px;
                width: 500px;
                height: 36px;
                text-indent: 10px;
            }
            p{
                width: 38px;
                margin-top: 10px;
                margin-left: 20px;
                a{
                    color: white;
                    font-size: 19px;
                }
            }
        }
        ul{
            li{
                list-style: none;
                float: left;
                margin-left: 10px;
                a{
                    color: #666666;
                }
            }
        }
    }
    .sd3{
        width: 162px;
        height: 46px;
        background: url(../img/shopping-cart.gif) no-repeat;
        padding-top: 10px;
        p{
            color: #666666;
            margin-left:45px ;
        }
    }
}
// 头部导航栏
.nav{
    ul{
        margin-left: -40px;
        li{
            width: 110px;
            height: 35px;
            list-style: none;
            float: left;
            line-height: 35px;
            text-align: center;
            font-weight: 900;
        }
        .nl1{
            a{
                color: black;
            }
            border: 1px solid #e1e1e1;
            img{
                transition:all .3s;
            }
        }
        .nl2{
            a{
                color: black;
            }
            border: 1px solid #e1e1e1;
            img{
                transition:all .3s;
            }
        }
        .toGreen{
            a{
                color: black;
            }
            img{
                transition:all .3s;
            }
        }
    }
}
// .toGreen:hover img{
//     transform:'rotate(360deg)';
// }
// banner图
.banner{
    display: flex;
    position: relative;
    .bd1{
        display: none;
        position: absolute;
        z-index: 1;
    }
    .bd1copy{
        position: absolute;
        z-index: 1;
        width: 235px;
        height: 360px;
        display: none;
        background: white;
        .cod1,.cod2,.cod3,.cod4,.cod5,.cod6,.cod7{
            width: 220px;
            height: 51px;
            border-bottom: 1px solid #e1e1e1;
            line-height: 51px;
            position: relative;
            
            .s1{
                margin-left: 15px;
            }
            .s2{
                margin-left: 80px;
            }
            b{
                width: 0;
                height: 0;
                border-color:  transparent transparent transparent #999999;
                border-style: solid;
                border-width: 4px;
                position: absolute;
                top: 20px;
                right: 5px;
            }
            .supernews{
                width: 568px;
                background: white;
                display: none;
                border: 1px solid #4d9b35;
                position: absolute;
                left:220px ;
                top: 0;
                z-index: 1;
                .snd1,.snd2{
                    display: flex;
                    span{
                        color:  #4d9b35;
                        font-weight: 900;
                    }
                    .supsp{
                        font-size: 19px;
                    }
                    .subsp{
                        font-size: 13px;
                    }
                }
                .snd1{
                    border-bottom: 1px solid #e1e1e1;
                    
                    img{
                        height: 35px;
                    }
                }
                .snd2{
                    font-size: 13px;
                    margin-left: 80px;
                    border-bottom: 1px solid #e1e1e1;
                    div{
                        margin-left: 5px;
                        text-align: center;
                    }
                    img{
                        height: 27px;
                    }
                }
            }
        }
        .cod2{
          .supernews{
            width: 568px;
            background: white;
            display: none;
            border: 1px solid #4d9b35;
            position: absolute;
            left:220px ;
            top: -51px;
            z-index: 1;
            .snd1,.snd2{
                display: flex;
                span{
                    color:  #4d9b35;
                    font-weight: 900;
                }
                .supsp{
                    font-size: 19px;
                }
                .subsp{
                    font-size: 13px;
                }
            }
            .snd1{
                border-bottom: 1px solid #e1e1e1;
                
                img{
                    height: 35px;
                }
            }
            .snd2{
                font-size: 13px;
                img{
                    height: 27px;
                }
            }
          }  
        }
        .cod3{
            .supernews{
              width: 568px;
              background: white;
              display: none;
              border: 1px solid #4d9b35;
              position: absolute;
              left:220px ;
              top: -102px;
              z-index: 1;
              .snd1,.snd2{
                  display: flex;
                  span{
                      color:  #4d9b35;
                      font-weight: 900;
                  }
                  .supsp{
                      font-size: 19px;
                  }
                  .subsp{
                      font-size: 13px;
                  }
              }
              .snd1{
                  border-bottom: 1px solid #e1e1e1;
                  
                  img{
                      height: 35px;
                  }
              }
              .snd2{
                  font-size: 13px;
                  img{
                      height: 27px;
                  }
              }
            }  
        }
        .cod4{
            .supernews{
              width: 568px;
              background: white;
              display: none;
              border: 1px solid #4d9b35;
              position: absolute;
              left:220px ;
              top: -153px;
              z-index: 1;
              .snd1,.snd2{
                  display: flex;
                  span{
                      color:  #4d9b35;
                      font-weight: 900;
                  }
                  .supsp{
                      font-size: 19px;
                  }
                  .subsp{
                      font-size: 13px;
                  }
              }
              .snd1{
                  border-bottom: 1px solid #e1e1e1;
                  
                  img{
                      height: 35px;
                  }
              }
              .snd2{
                  font-size: 13px;
                  img{
                      height: 27px;
                  }
              }
            }  
        }
        .cod5{
            .supernews{
              width: 568px;
              background: white;
              display: none;
              border: 1px solid #4d9b35;
              position: absolute;
              left:220px ;
              top: -204px;
              z-index: 1;
              .snd1,.snd2{
                  display: flex;
                  span{
                      color:  #4d9b35;
                      font-weight: 900;
                  }
                  .supsp{
                      font-size: 19px;
                  }
                  .subsp{
                      font-size: 13px;
                  }
              }
              .snd1{
                  border-bottom: 1px solid #e1e1e1;
                  
                  img{
                      height: 35px;
                  }
              }
              .snd2{
                  font-size: 13px;
                  img{
                      height: 27px;
                  }
              }
            }  
          }
        .cod6{
            .supernews{
              width: 568px;
              background: white;
              display: none;
              border: 1px solid #4d9b35;
              position: absolute;
              left:220px ;
              top: -255px;
              z-index: 1;
              .snd1,.snd2{
                  display: flex;
                  span{
                      color:  #4d9b35;
                      font-weight: 900;
                  }
                  .supsp{
                      font-size: 19px;
                  }
                  .subsp{
                      font-size: 13px;
                  }
              }
              .snd1{
                  border-bottom: 1px solid #e1e1e1;
                  
                  img{
                      height: 35px;
                  }
              }
              .snd2{
                  font-size: 13px;
                  img{
                      height: 27px;
                  }
              }
            }  
        }
        .cod7{
            line-height: 51px;
            text-align: center;
            color: #666666;
            position: relative;
            .supernews{
                width:650px;
                height: 350px;
                position: absolute;
                left:220px ;
                top: -306px;
                img{
                    width: 280px;
                    margin: 10px;
                }
            }
        }
    }
    .bd1{
        width: 235px;
        height: 360px;
        .bd11{
            height: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #f5f5f5;
            text-align: center;
            line-height: 30px;
            position: relative;
            .dog{
                position: absolute;
                left: -27px;
                z-index: 1;
                display: none;
            }
        }
        .bd12{
            height: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #ffffff;
            text-align: center;
            line-height: 30px;
            position: relative;
            .cat{
                position: absolute;
                left: -27px;
                z-index: 1;
                display: none;
            }
        }
        .bd1p1{
            img{
                width: 48px;
                height: 48px;
            }
        }
        .bd1p2{
            span{
                color: red;
            }
        }
        .bd1p3{
            width:110px ;
            height:30px ;
            border:1px solid #999999 ;
            border-radius: 5px;
            font-size: 13px;
        }
    }
    .bd2{
        img{
            width:768px ;
            height:360px ;
        }
    }
    .bd3{
        width: 200px;
        height: 360px;
        background: white;
        position: relative;
        overflow: hidden;
    }
}
// 商品属性
// 放大
.iteminfor{
    padding-top: 60px;
    min-height: 600px;
    position: relative;
    ul{
        width: 1200px;
        height: 40px;
        position: absolute;
        top: -10px;
        left: -40px;
        li{
            margin-top: 20px;
            margin-bottom: 20px;
            list-style: none;
            float: left;
            height: 20px;
            width: 80px;
            font-size: 13px;
            color: #666666;
            line-height: 20px;
            text-align: center;
            border: 1px solid #e1e1e1;
        }
    }
    .iid1{

        display: flex;
        .magnify{
            // padding-top: 60px;
            .photos{
                width: 300px;
                display: flex;
                align-items: center;
                position: relative;
                .arrowleft,.arrowright{
                    width: 19px;
                    height: 74px;
                    border: 1px solid #e1e1e1;
                    line-height: 74px;
                    text-align: center;
                    margin-top: 20px;

                }
                .fivephotos{
                    width: 280px;
                    height: 75px;
                    margin-top: 20px;
                    overflow: hidden;
                    position: relative;
                    ul{
                        position: absolute;
                        border: none;
                        width:400px ;
                        height: 70px;
                        top: 0px;
                        left: 0px;    
                        li{
                            border: 1px solid #e1e1e1;
                            margin-top: 0px;
                            margin-bottom: 0px;
                            list-style: none;
                            float: left;
                            height: 70px;
                            width: 70px;
                            font-size: 13px;
                            color: #666666;
                            line-height: 20px;
                            text-align: center;
                            border: none;
                           img{
                                margin-left: 0px;
                                width: 70px;
                                height: 70px;
                            } 
                        }
                    }
                    
                }
            }
            .number{
                margin-top: 40px;
                .ns2{
                    margin-left:40px;
                    margin-right: 40px;
                }
            }
        }
        .property{
            margin-left: 100px;
            width: 748px;
            background: #fcfcfc;
            padding-left: 30px;
            padding-right: 30px;
            .pp1,.pp2{
                font-size: 20px;
                font-weight: 600;
            }
            .pp3{
                background: #ff7171;
                height: 64px;
                width: 667px;
                font-size: 16px;
                line-height: 64px;
                display: flex;
                flex-wrap: nowrap;
                .s31{
                    color: white;
                    margin-left: 10px;
                }
                .s32{
                    font-size: 12px;
                    color: white;
                    margin-left: 290px;
                }
                .countdown{
                    margin-left: 10px;
                    span{
                        display: inline-block;
                        line-height: 25px;
                        text-align: center;
                        background: white;
                        color: black;
                        border-radius: 50%;
                        width: 25px;
                        height: 25px;
                    }
                }
            }
            .pp4{
                margin-top: -10px;
                background: #f3f3f3;
                height: 64px;
                width: 667px;
                line-height: 64px;
                .s41{
                    font-size: 15px;
                    color: #999999;
                }
                .s42{
                    font-size: 32px;
                    color: #e3393c;
                }
            }
            .pp8{
                display: flex;
                align-items: center;
                .s81{
                    color: #999999;
                    font-size:16px ;
                }
                .s82{
                    margin-left: 20px;
                    display: inline-block;
                    width: 89px;
                    height:34px ;
                    border: 1px #666666 solid;
                    span{
                        display: inline-block;
                        height: 31px;
                        line-height: 31px;
                        text-align: center;
                    }
                    .s821,.s823{
                        width: 20px;
                        background: #f3f3f3;
                    }
                    .s822{
                        width: 35px;
                    }
                }
            }
            .pp11{
                height: 56px;
                width:190px ;
                background: #78b300;
                border-radius: 5px;
                color: white;
                font-size: 23px;
                font-weight: 600;
                line-height:56px;
                text-align: center;
            }
        }
    }
}
.toshowmorelist{
    display: flex;
    flex-wrap: wrap;
    div{
        border: 1px solid #e1e1e1;
        margin: 12px;
    }
}
.magnify{position: relative;}
.magnify .small{width: 300px;height: 300px;}
.magnify .small img{width: 300px;height: 300px;position: absolute;}
.magnify .big{display: none;width: 400px;height: 400px; position: absolute;left: 300px;top: 0;overflow: hidden;z-index: 1;}
.magnify .big img{width: 800px;height: 800px;position: absolute;}
.magnify .move{width: 100px;height: 100px;position: absolute;background: white;opacity: .8;display: none;}
// 尾部
.footer div{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 900;
}
.footeritem{
    height: 230px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.thelast{
    display: flex;
    font-size: 13px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .tld1{
        color: #999999;
        margin-top: 20px;
    }
    .tld2{
        margin-top: 20px;
        margin-bottom: 20px;
        img{
            margin-left: 10px;
        }
    }
}
// 侧边服务栏
.aside{
    background: #444444;
    width: 30px;
    min-height: 100%;
    position: fixed;
    right:0;
    top: 0;
    .ad2,.ad3{
        position: relative;
        margin-bottom: 20px;
        p{
            text-align: center;
            line-height: 13px;
            font-size: 13px;
            color: #9b9b9b;
        }
    }
    div{
        width: 30px;
        .img1{
            width: 25px;
            margin-left: 2px;
        }
        .adp1{
            margin-left: 5px;
            color: black;
            text-align:center ;
            line-height: 20px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #666666;
        }
    }
    .ad1{
        width: 30px;
        height: 30px;
        margin-top: 90px;
        margin-bottom: 20px;
    }
    .ad2{
        position: relative;
        .ad21{
            width: 510px;
            height: 306px;
            overflow-y: auto;
            border: 1px solid #e1e1e1;
            background: white;
            position: absolute;
            left: -510px;
            top: -50px;
            div{
                width: 510px;
                border: 1px solid #e1e1e1;
            }
            img{
                margin-top: 20px;
                margin-left: 30px;
                width: 70px;
                height: 70px;
            }
            a{color: black;font-size: 12px;width: 50px;;}
            p{
                width: 400px;
                text-align:left;
                text-indent: 20px;
            }
        }
    }
    .ad5{
        margin-bottom:70px;
    }
    .ad8{
        margin-bottom: 10px;
    }
}